AMP (Accelerated Mobile Pages) এর Style এবং Layout Attributes বিশেষভাবে ডিজাইন করা হয় যাতে ওয়েব পেজগুলো দ্রুত লোড হয় এবং মোবাইল ডিভাইসে সঠিকভাবে প্রদর্শিত হয়। AMP এর Style এবং Layout সম্পর্কে কিছু নির্দিষ্ট নিয়ম এবং নির্দেশিকা রয়েছে, যা ডেভেলপারদের দ্বারা অনুসরণ করা হয়।
AMP এর Style
AMP পেজের স্টাইলিং (CSS) এর জন্য কিছু নির্দিষ্ট বিধি এবং সীমাবদ্ধতা আছে। এর উদ্দেশ্য হল পেজের লোডিং টাইম কমানো এবং রেন্ডারিং প্রক্রিয়াকে দ্রুত করা।
সীমিত CSS আকার:
- AMP পেজের জন্য CSS কোডের আকার ৫০ KB-এর বেশি হতে পারে না। এর ফলে পেজের লোডিং টাইম কমানো যায় এবং পেজ দ্রুত রেন্ডার হয়।
- CSS কোডটি
<style amp-custom>ট্যাগের মধ্যে থাকা উচিত, যা পেজের হেড সেকশনে রাখতে হবে।
<style amp-custom> /* CSS কোড এখানে */ </style>- CSS ব্যবহার সীমিত:
- AMP সাইটে কিছু CSS প্রোপার্টি বা নিয়ম ব্যবহার করতে নিষেধ করা হয়, যেমন
@import(যে কোনও CSS ফাইল ইম্পোর্ট করা) বাposition: fixed(ফিক্সড পজিশন ব্যবহার করা)। - এছাড়া, বাইন্ডিং বা ডায়নামিক স্টাইলিং সিস্টেম (যেমন jQuery দিয়ে স্টাইল পরিবর্তন করা) গ্রহণযোগ্য নয়।
- AMP সাইটে কিছু CSS প্রোপার্টি বা নিয়ম ব্যবহার করতে নিষেধ করা হয়, যেমন
- AMP CSS বৈশিষ্ট্য:
- AMP তে আপনাকে ব্যবহার করতে হবে শুধুমাত্র নির্দিষ্ট CSS প্রোপার্টি এবং উপাদানগুলি, যাতে পেজের লোডিং দ্রুত হয়।
উদাহরণস্বরূপ,
amp-img(ইমেজ ট্যাগ) ব্যবহার করতে হলে কিছু নির্দিষ্ট স্টাইল নিয়ম অনুসরণ করতে হবে:<amp-img src="image.jpg" width="600" height="400" layout="responsive"></amp-img>
AMP এর Layout Attributes
AMP তে লেআউটের জন্য নির্দিষ্ট Layout Attributes ব্যবহার করা হয়, যা পেজের ডিজাইন এবং স্টাইলিং নির্ধারণ করে। এই লেআউট অ্যাট্রিবিউটগুলি AMP উপাদানগুলির জন্য বাধ্যতামূলক এবং এগুলি ব্যবহার করে পেজের ডিসপ্লে দ্রুত রেন্ডার করা হয়।
১. Layout Attributes এর ধরন
layout="fixed":- এই অ্যাট্রিবিউটটি ব্যবহার করা হয় যখন কোনো উপাদান (যেমন, ইমেজ) নির্দিষ্ট আকারে প্রদর্শিত হতে হবে।
- এটি উপাদানের আকার স্থির করে এবং কোনো প্রোপোরশনাল রূপে রেন্ডার হয় না।
<amp-img src="image.jpg" width="300" height="200" layout="fixed"></amp-img>layout="responsive":- এই অ্যাট্রিবিউটটি উপাদানকে রেসপন্সিভ আকারে তৈরি করে। অর্থাৎ, এটি ভিউপোর্টের আকার অনুযায়ী উপাদানের আকার অটো-স্কেল করবে।
- এটি সাধারণত ইমেজ, ভিডিও বা অন্যান্য মাল্টিমিডিয়া উপাদানের জন্য ব্যবহৃত হয়।
<amp-img src="image.jpg" width="600" height="400" layout="responsive"></amp-img>layout="intrinsic":- এই অ্যাট্রিবিউটটি উপাদানের প্রকৃত প্রোপোরশন অনুযায়ী আকার নির্ধারণ করে। এতে উপাদানটির স্বাভাবিক আকার বজায় থাকে, এবং এটি রেসপন্সিভ প্রক্রিয়ায় কাজ করে।
<amp-img src="image.jpg" width="600" height="400" layout="intrinsic"></amp-img>layout="fill":- এটি উপাদানটির আকার পূর্ণভাবে তার প্যারেন্ট কন্টেইনারের সঙ্গে মিলিয়ে দেয়। অর্থাৎ, কন্টেইনারের পুরো এলাকা ফিল করা হয়।
- এটি সাধারণত ব্যাকগ্রাউন্ড ইমেজ বা অন্যান্য পূর্ণ কভার উপাদানের জন্য ব্যবহৃত হয়।
<amp-img src="image.jpg" layout="fill"></amp-img>
২. কাস্টম লেআউট সিস্টেম
AMP প্রাথমিকভাবে পূর্বনির্ধারিত লেআউটের জন্য কয়েকটি আর্কিটেকচার ডিফাইন করেছে, যেমন <amp-layout> (যা সাধারণত কাস্টম লেআউট তৈরির জন্য ব্যবহার হয়)। তবে, এটি স্ট্যান্ডার্ড অ্যাট্রিবিউটগুলির উপর নির্ভরশীল এবং আপনাকে কাস্টম ডিজাইনের জন্য অতিরিক্ত CSS ব্যবহার করতে হবে।
৩. amp-iframe এর Layout
<amp-iframe> উপাদানটি সাধারণত অন্য ওয়েব পেজ বা কন্টেন্ট এমবেড করার জন্য ব্যবহৃত হয়। এটি কিছু নির্দিষ্ট লেআউট অ্যাট্রিবিউটের সঙ্গে আসে:
<amp-iframe src="https://example.com" width="600" height="400" layout="responsive"></amp-iframe>AMP এর Layout ট্যাগ ব্যবহার করা
AMP পেজে বিভিন্ন layout অ্যাট্রিবিউটের মধ্যে সঠিক নির্বাচন করা গুরুত্বপূর্ণ, কারণ এটি পেজের উপাদানগুলো কিভাবে রেন্ডার হবে তা নির্ধারণ করে। যেহেতু AMP পেজগুলো দ্রুত লোড হওয়ার জন্য ডিজাইন করা হয়েছে, তাই এই লেআউট অ্যাট্রিবিউটগুলো অ্যাডজাস্ট করা হয় যাতে পেজ দ্রুত প্রদর্শিত হয়।
AMP Style এবং Layout-এ গুরুত্বপূর্ণ পয়েন্ট
- CSS সীমাবদ্ধতা: AMP পেজের জন্য CSS কোড সীমিত থাকতে হয় এবং ৫০ KB-এর বেশি হতে পারে না।
- স্টাইল প্রোপার্টি: CSS স্টাইলের অনেক সাধারণ প্রোপার্টি AMP তে ব্যবহার করা যায় না, যেমন
position: fixed,@import, এবংfloat। - লেআউট অ্যাট্রিবিউট: AMP সাইটে পেজের লেআউট দ্রুত রেন্ডার করতে বিভিন্ন অ্যাট্রিবিউট ব্যবহার করা হয়, যেমন
layout="fixed",layout="responsive",layout="fill"।
AMP এর স্টাইল এবং লেআউট অ্যাট্রিবিউটগুলির সঠিক ব্যবহার ওয়েব পেজের পারফরম্যান্স উন্নত করতে সাহায্য করে এবং দ্রুত রেন্ডারিং নিশ্চিত করে।
Read more
